<template>
	<div id="app">
		<header id="header">
			<nav class="navbar navbar-expand-lg navbar-light bg-light">
				<div class="container-fluid">
					<a  class="nav-logo navbar-brand">
						<i class="iconfont icon-shouye" style="font-size: 30px;"></i>
					</a>
					<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
					 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav me-auto mb-2 mb-lg-0">
							<li class="nav-item">
								<div class="nav_index">
									<router-link :to="{path:'/'}">首页</router-link>
								</div>
							</li>
							<li class="nav-item" v-for='a in goodslist.slice(0,4)'>
								<div class="nav_rim">
									<a class="nav-link" href="#">{{a.cat_name}}</a>
									<div class="show_rim">
										<div class="container">
											<ul class="rim_info">
												<li class="costume" v-for='bb in a.children.slice(0,4)'>
													<h4>{{bb.name}}</h4>
													<ul>
														<li v-for='ccc in bb.children'>
															<router-link :to="{path:'/goodslist',query:{cid:ccc.cat_id}}">
																<img :src="ccc.cat_icon" />
																<h5>{{ccc.cat_name}}</h5>
															</router-link>
														</li>
													</ul>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</li>
						</ul>
						<div id="nav_right">
							<div id="nav_user">
								<i class="iconfont icon-shouye1" @click="islogin1()"></i>
							</div>
							<div id="nav_shoppingcart" class="float-right">
								<div @mouseover="islogin()" @mouseout="mouseover()">
									<i class="iconfont icon-shouye2" @click="islogin2()"></i>
									<div class="cartlist" v-show="cartflag">
										<div class="cartgoods" v-show="isfull">
											<div class="cartgoods_info" v-for="item in goodscartlist">
												<img :src="item.goods_small_logo" />
												<h4>{{item.goods_name.slice(0,8)}}...</h4>
												<h5>X{{item.num}}</h5>
											</div>
										</div>
										<div class="null" v-show="isnull">
											<img src="../../../public/images/cart-empty_@2x.png" />
											<span>购物车还是空的!</span>
										</div>
									</div>
								</div>
							</div>
							<div id="nav_tc" v-show="quit">
								<i class="iconfont icon-0-02" @click="quitUser()"></i>
							</div>
						</div>
					</div>
				</div>
			</nav>
		</header>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				goodslist: [],
				goodscartlist: [],
				cartflag: false,
				isfull: true,
				isnull: false,
				token: "",
				quit:true
			}
		},
		created() {
			this.getdata();
			this.token = window.sessionStorage.getItem('token');
			this.islogin3();
		},
		methods: {
			getdata(){
				this.$axios.get('http://localhost:8080/mall/sorts/categories').then(function(ret) {
					this.goodslist = ret.data.message;
				}.bind(this));
			},
			islogin() {
				if (this.token != null) {
					this.mouseon();
				}
			},
			islogin1() {
				if (this.token != null) {
					this.$router.push({
						path: '/user'
					})
				} else {
					this.$message("未登录，请先登录");
					this.$router.push({
						path: '/login'
					});
				}
			},
			islogin2() {
				if (this.token != null) {
					this.$router.push({
						path: '/showcart'
					})
				} else {
					this.$message("未登录，请先登录");
					this.$router.push({
						path: '/login',
						query: {
							redirect: '/showcart'
						}
					});
				}
			},
			islogin3() {
				if (this.token != null) {
					this.quit = this.quit;
				}else{
					this.quit = !this.quit;
				} 
			},
			quitUser(){
				this.$confirm('真的要退出吗? 不要再看看吗?',  {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					window.sessionStorage.clear();
					this.$router.push({path: '/login'});
				}).catch(() => {
					// this.$message('已取消退出');
				});
				
			},
			// 购物车展开与隐藏
			mouseon: function() {
				this.cartflag = true;
				this.$axios.get('http://localhost:8080/mall/goods/showCart').then(function(ret) {
					this.goodscartlist = ret.data.message.message;
					if (this.goodscartlist.length <= 0) {
						this.isfull = !this.isfull;
						this.isnull = !this.isnull;
					}
				}.bind(this));
			},
			mouseover: function() {
				this.cartflag = false
			}
		}
	}
</script>

<style scoped lang="less">
	body,
	html {
		padding: 0;
		margin: 0;
	}

	@-webkit-keyframes fadeIn {
		0% {
			opacity: 0;
			/*初始状态 透明度为0*/
		}

		50% {
			opacity: 0;
			/*中间状态 透明度为0*/
		}

		100% {
			opacity: 1;
			/*结尾状态 透明度为1*/
		}
	}

	li {
		list-style: none;
	}

	a:hover {
		text-decoration: none;
	}

	#header {
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		background-color: #ffffff;
		position: fixed;
		z-index: 99;

		.container-fluid>a>img {
			width: 60px;
			margin-left: 15px;
			margin-right: 60px;
		}

		.nav-item {
			margin-left: 20px;
			width: 100px;

			.nav_index {
				height: 70px;
				line-height: 70px;

				a {
					color: rgba(0, 0, 0, 0.5);
					font-size: 18px;

				}

				&:hover {
					font-size: 17px;
				}
			}

			.nav_rim {
				height: 70px;
				line-height: 55px;
				position: relative;

				a {
					height: 50px;
				}

				.nav-link {
					font-size: 18px;
					min-width: 120px;
				}

				.show_rim {
					position: fixed;
					top: 75px;
					left: 0px;
					width: 100%;
					height: auto;
					background-color: rgba(249, 249, 249, 0.7);
					border-top: #bbbbc2 solid 1px;
					visibility: hidden;
					z-index: 999;
					.rim_info {
						margin: 10px auto;
						display: flex;
						.costume {
							margin-left: 70px;
							// border: #000000 solid 1px;
							height: auto;
							width: 190px;
							h4 {
								color: #ababab;
								font-size: 14px;
							}
							ul li a {
								width: 140px;
								margin-left: -40px;
								display: flex;
								img {
									width: 35px;
									height: 35px;
									// border: #002752 solid 1px;
								}
								h5 {
									margin-left: 20px;
									margin-top: 5px;
									font-size: 17px;
									width: auto;
								}
							}
						}
					}
				}

				&:hover {
					color: #007BFF;
					// font-size: 17px;

					.show_rim {
						visibility: inherit;
						-webkit-animation-name: fadeIn;
						/*动画名称*/
						-webkit-animation-duration: 1.5s;
						/*动画持续时间*/
						-webkit-animation-iteration-count: 1;
						/*动画次数*/
						-webkit-animation-delay: 0s;
						/*延迟时间*/
					}
				}
			}
		}

		#nav_right {
			width: 100%;
			display: flex;
			justify-content: flex-end;

			.nav_search {
				// margin-left: 100px;

				button {
					line-height: 0;
					width: 44px;
					height: 38px;

					i {
						margin: 10px -10px 10px -10px;
					}
				}
			}

			#nav_user {
				margin-left: 100px;
				color: #000000;
				text-decoration: none;

				i {
					font-size: 25px;

					&:hover {
						color: #007BFF;
					}
				}

			}
			#nav_tc {
				margin-left: 20px;
				color: #000000;
				text-decoration: none;
			
				i {
					font-size: 28px;
			
					&:hover {
						color: #007BFF;
					}
				}
			
			}

			#nav_shoppingcart>div {
				position: relative;


				margin-left: 20px;
				color: #000000;
				text-decoration: none;

				i {
					font-size: 27px;
				}

				&:hover {
					color: #007BFF;
				}
			}
			.cartlist {
				position: fixed;
				right: 20px;
				width: 250px;
				height: auto;
				border: #8b8f96 solid 1px;
				background-color: #fff;
				.cartgoods {
					width: 100%;
					.cartgoods_info {
						width: 100%;
						height: 65px;
						display: flex;
						justify-content: space-around;
						img {
							width: 40px;
							height: 40px;
							margin-top: 8px;
						}
						h4 {
							margin-top: 15px;
							font-size: 16px;
						}
						h5 {
							font-size: 14px;
							color: gray;
							margin-top: 35px;
						}
					}
				}

				.cartbtn {
					border-top: #e7e7e7 solid 1px;
					width: 100%;
					display: flex;
					padding: 20px;
					height: 65px;
					span {
						line-height: 30px;
						text-align: center;
						height: 30px;
						width: 90px;
						margin-left: 120px;
						color: rgb(255, 255, 255);
						font-size: 14px;
						border: 1px solid #5c81e3;
						border-radius: 4px;
						font-size: 12px;
						background-color: #678ee7;
						background-image: linear-gradient(180deg, #678ee7, #5078df);
					}
				}
			}
			.null {
				width: 100%;
				height: 160px;
				padding: 30px;
				display: flex;
				flex-direction: column;
				img {
					margin-left: 50px;
					width: 80px;
					height: 80px;
				}
				span {
					margin-top: 10px;
					font-weight: bolder;
					text-align: center;
				}
			}
		}
	}
</style>
